<template>

    <div class="page-gift-revision" v-if="showPage">
        <CustomNav title="选择赠送产品" :fixed="true"></CustomNav>
        <CustomNav title="选择赠送产品" :opacity="0"></CustomNav>

        <div class="main">
            <div class="item" :key="index">
                <!-- <LineTitle :value="item.attr" :has-pad="true" /> -->
                <div class="btn-title white-color">
                    {{productSpec[specIndex].attr}}
                </div>
                <div class="inner">
                    <PackageSelect :order-id="orderId" :spec-index="specIndex" :pkg-id="pkgId"/>
                </div>
            </div>
        </div>
        <div class="fixed-btn-wrap text-normal">
            <div class="btn btn-mobile btn-large btn-block btn-blue-white" @click="onClickSure">
                确认产品
            </div>
        </div>
    </div>

</template>

<script lang="ts">
import store from '@/store';
import PackageSelect from '@/features/manage/packageSelect.vue';
import LineTitle from '@/components/common/lineTitle.vue';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'GiftRevision',
    components: {
        PackageSelect,
        LineTitle,
    },
})
export default class GiftRevision extends Vue {
    /** 套餐id */
    public get pkgId() {
        return this.$route.query.pkg_id;
    }
    public get orderId() {
        return this.$route.query.order_id;
    }
    public get specIndex() {
        return this.$route.query.spec_index ? Number(this.$route.query.spec_index) : null;
    }
    public showPage: any = true;

    public get productSpecMap() {
        return store.state.manage.productSpecMap;
    }

    public get selectedGoodsSpecMap() {
        return store.state.manage.selectedGoodsSpecMap;
    }

    public get sureGoodsSpecMap() {
        return store.state.manage.sureGoodsSpecMap;
    }

    public get key() {
        return `${this.pkgId}_${this.orderId}`;
    }

    public get productSpec() {
        return this.productSpecMap[this.key] ? this.productSpecMap[this.key] : [];
    }

    public get selectedGoodsSpec() {
        return this.selectedGoodsSpecMap[this.key] ? this.selectedGoodsSpecMap[this.key] : [];
    }

    public get sureGoodsSpec() {
        return this.sureGoodsSpecMap[this.key] ? this.sureGoodsSpecMap[this.key] : [];
    }

    public get selectedSpecIds() {
        return this.sureGoodsSpec.length ? this.sureGoodsSpec.map((item: any) => {
            return item.filter((val: any) => {
                return val.number > 0;
            });
        }).flat(Infinity).map((temp: any) => {
            return {
                id: temp.id,
                number: temp.number,
            };
        }) : [];
    }

    public async onClickSure() {
        store.commit('manage/setSureGoodsSpec', {
            key: this.key,
        });
        await store.dispatch('manage/giveGift', {
            orderId: this.orderId,
            spec: this.selectedSpecIds,
        });
        wx.navigateBack();
    }

    public async created() {
        this.showPage = false;
        store.commit('utils/startRequest');
        await store.dispatch('manage/getProductSpec', {
            pkgId: this.pkgId,
            orderId: this.orderId,
        });
        store.commit('manage/resetSelectedGoodsSpec', {
            key: this.key,
        });
        this.showPage = true;
        store.commit('utils/endRequest');
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";
.page-gift-revision {
    min-height: 100%;
    padding-bottom: 200rpx;
    // background-color: @color-default-bg;
    background-color: #91c2f7;
    .main {
        .item {
            .title {
                padding: 30rpx 0;
                text-align: center;
            }
            .btn-title {
                width: 222px;
                height: 26px;
                line-height: 26px;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 50%;
                transform: translateX(-50%);
                background: #288DF8;
                border-radius: 14rpx;
                font-size: 14px;
                text-align: center;
            }
           .inner {
                box-sizing: border-box;
                margin: 0 10px;
                // padding: 0 30rpx;
                border-radius: 14rpx;
            }
        }
    }
    .fixed-btn-wrap {
        padding: 10px 40rpx;
    }
}

</style>
